import React from 'react';

import './index.scss'
const echarts = require('echarts');

class BarChat extends React.Component {
  componentDidMount() {
    this.initChat()
  }
  initChat() {
    const myChart = echarts.init(document.getElementById('barChat'));
    const option = {
      backgroundColor: "transparent",
      color: ["#F5A52D","#002FFF"], //柱图形颜色
      legend:{
          left:'right',
          orient:'horizontal',
          // data:[
          //   {name:'新增'},
          //   {name:'完成'}
          // ],
          tooltip:{
              show:true
          },
          textStyle:{//图例文字的样式
          color:'#fff',
          fontSize:12
          }
      },
      xAxis: [
        {
          type: "category",
          data: [1,2,3,4,5,6,7,8],
          axisLabel: {
            inside: false,
            interval:0,
            rotate:30,
            textStyle: {
              color: "#CCCCCC"
            }
          },
          // X轴坐标
          axisTick: {
            show: false
          },
          //X轴线设置
          axisLine: {
            show: true,
            type: "solid",
            lineStyle: {
              color: "#cccccc",
              width: "1"
            }
          },
          z: 10
        }
      ],
      yAxis: {
        name: '个',
        minInterval:1,
        nameTextStyle: {
            padding: [0, 0, -10,13]
        },
        // 隐藏Y轴
        axisLine: {
          show: true,
          type: "solid",
          lineStyle: {
            color: "#cccccc",
            width: "1"
          }
        },
        //   隐藏刻度标准
        axisTick: {
          show: false
        },
        //   隐藏刻度
        axisLabel: {
          show: true,
          inside: false,
          interval:0,
          textStyle: {
            color: "#CCCCCC"
          }
        },
        //   隐藏网格线
        splitLine: {
          show: false
        }
      },
      dataZoom: [
          {
            type: 'inside',
            startValue:this.tmpNumber1,
            endValue:this.tmpNumber2
            // startValue:0,
            // endValue:6
          }
      ],
      //数据
      series: [
        // 第一根柱子的配置
        {
          name: "新增",
          type: "bar",
          // 柱子的宽度
          barWidth: "10",
          data: [20,33,222,111,222,222,11,111],
          //配置样式
          itemStyle: {
            normal: {
              // 柱子样式
              barBorderRadius:[10, 10, 0, 0],
              //每个柱子的颜色
              color: ["#F5A52D"],
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#F5F5F5",
                  fontSize: 12
                },

              }
            }
          }
        },
        // 第二根柱子的配置
        {
          name: "完成",
          type: "bar",
          // 柱子的宽度
          barWidth: "10",
          data: [44,53,22,11,222,222,11,111],
          barGap:'80%',
          itemStyle: {
            normal: {
              // 柱子样式
              barBorderRadius:[10, 10, 0, 0],
              //每个柱子的颜色
              color: ["#002FFF"],
              label: {
                show: true, //开启显示
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#F5F5F5",
                  fontSize: 12
                }
              }
            }
          }
        }],
        //控制边距　
        grid: {
          left: '15',
          right:'0%',
          top: '20',
          bottom: 20,
          containLabel: true,
        }

    };
    myChart.setOption(option);
  }
  render() {
    return (
      <div className="bar-chat" id="barChat"></div>
    )
  }
}

export default BarChat